<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
    <title>Document</title>
</head>

<body>
    <!-- 准备一个容器 -->
    <!-- vue实例挂载的容器 -->
    <div id="root">

    </div>

</body>
<script>
    Vue.config.productionTip = false // 阻止 Vue在启动时生成生产提示
    // vue的基本使用
    const vm = new Vue({
        // 1. el属性:是提供vue实例挂载的容器,提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例
        // el: '#root',
        el:document.getElementById('root'),
        // 2. Vue实例的数据对象（用来存储数据的）
        data: {
            title:'初学vue',
            message:'Hello Vue'
        },
        // 3. 模板将会替换原挂载的元素，原挂载元素的内容都会被忽略
        template:`
            <div>
                <h1>{{title}}</h1>
                <h1>{{message}}</h1>
            </div>
        `
    }) 
    /**
     * 疑问：为什么Vue这个构造函数 不是传递多个形参 而是 直接传递一个对象
     * 个人解答：1-传参方便，不需要传递多个，不用在乎谁不传设置默认值的问题
     *          2-可以通过{}（config）------随便传递参数，一个对象多个属性足以
     *          3-可以不考虑顺序
    */
</script>

</html>